import {Pie} from '@ant-design/plots';
import {Card, message, Radio, Tooltip, Typography} from 'antd';
import React, {useEffect, useState} from 'react';
import useStyles from './style.style';
import {getTotalApplyMesUsingGet} from "@/services/api-share-backhend/analysiController";
import MyPie from "@/components/charts/MyPie";
import {InfoCircleOutlined} from "@ant-design/icons";

const TotalApplyNum = () => {
    const {styles} = useStyles();
    const [dataSource, setDataSource] = useState()
    const [loading, setLoading] = useState(false)
    const getData = async () => {
        try {
            const res = await getTotalApplyMesUsingGet();
            if (res.data !== null&&res.data!==undefined) {
                const data = res.data.reduce((acc, item) => {
                    acc.push({
                        item: item.name,
                        count: item.totalNum,
                        percent:item.percent
                    });
                    return acc;
                }, []);
                setDataSource(data)
            } else {
                message.error(res.message)
            }
        } catch (e) {

        }
    }
    // const data = [
    //     { item: '事例一', count: 40, percent: 0.4 },
    //     { item: '事例二', count: 21, percent: 0.21 },
    //     { item: '事例三', count: 17, percent: 0.17 },
    //     { item: '事例四', count: 13, percent: 0.13 },
    //     { item: '事例五', count: 9, percent: 0.09 },
    // ];

    useEffect(() => {
        getData()
    }, []);
    return (
        <Card
            loading={loading}
            className={styles.salesCard}
            bordered={false}
            title={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <span>接口调用开通情况</span>
                    <Tooltip title="各个用户对于每个接口的开通情况，主要对前10个接口分别统计了开通的总数">
                        <InfoCircleOutlined style={{ marginLeft: 8 }} />
                    </Tooltip>
                </div>
            }
            style={{
                height: '100%',
            }}
        >
            <div>
                <MyPie data={dataSource}/>
            </div>
        </Card>
    );
};
export default TotalApplyNum;
